<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
	border: 1px red solid;
	width: 500px;
	margin: auto;
}

td {
	border: 1px blue solid;
	margin: 10px;
	padding: 10px;
	text-align: center;
}

th {
	background-color: maroon;
}

.one {
	background-color: blue;
}

.two {
	background-color: green;
}

.over {
	background-color: aqua;
}
</style>

<script type="text/javascript">
	window.onload = () => {
		let tr = document.getElementsByTagName("tr");
		for (let i = 0; i < tr.length; i++) {
			if (i % 2 == 0){

			tr[i].className = "two";
			}else{
				tr[i].className = "one";
			}

			let oldClassName = '';
			tr[i].onmouseover = function () {
				oldClassName = this.className;
				tr[i].className = "over";
			}
			tr[i].onmouseout = () => {
				tr[i].className = oldClassName;
			}
		}

	}
</script>

</head>

<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr class="one">
			<td>高杰</td>
			<td>18</td>
			<td>闵行</td>
		</tr>
		<tr class="two">
			<td>李刚</td>
			<td>16</td>
			<td>上海</td>
		</tr>
		<tr>
			<td>赵士龙</td>
			<td>22</td>
			<td>东莞</td>
		</tr>
		<tr>
			<td>鲁宾</td>
			<td>29</td>
			<td>北京</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
	</table>



</body>
</html>
